<template>
  <div class="vod">
    <!-- 搜素 -->
    <el-form ref="form" class="el-form__search" :model="formData" inline>
      <el-form-item prop="keyword" label="关键词：">
        <el-input v-model="formData.keyword" placeholder="请输入关键词" />
      </el-form-item>
      <el-form-item prop="timeRange" label="时间范围：">
        <el-date-picker
          v-model="formData.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" plain @click="resetForm">重 置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleSearch">搜 索</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-button type="danger" style="margin: 15px 0" @click="handleDelete">
      批量删除
    </el-button>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="vod_name" label="名称" />
      <el-table-column prop="vod_note" label="更新状态">
        <template #default="{ row }">
          <el-tag type="success">
            {{ row.vod_note ? row.vod_note : '暂无状态' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="vod_lang" label="语言" />
      <el-table-column prop="vod_year" label="年份" />
      <el-table-column prop="updated_at" label="更新时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleDelete([row._id], true)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next"
      :page-sizes="[10, 15, 30, 50]"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { vodList, vodDelete } from '@i/vod'
export default {
  setup() {
    // 当前实例
    const ctx = getCurrentInstance().ctx
    const confirm = () =>
      ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

    // 表单逻辑
    const form = reactive({
      formData: {
        keyword: '',
        timeRange: []
      },
      handleSearch() {
        table.vodList()
      },
      resetForm() {
        ctx.$refs.form.resetFields()
        table.vodList()
      }
    })

    // 列表逻辑
    const table = reactive({
      loading: false,
      selectedRowKeys: [],
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      async vodList() {
        try {
          this.loading = true
          let timeRange = form.formData.timeRange ? form.formData.timeRange : []
          let data = await vodList({
            keyword: form.formData.keyword,
            sTime: timeRange[0],
            eTime: timeRange[1],
            currentPage: this.pagination.currentPage,
            pageSize: this.pagination.pageSize
          })
          this.loading = false
          this.tableData = data.list
          this.pagination.currentPage = data.currentPage
          this.pagination.total = data.total
        } catch (error) {
          this.loading = false
          throw error
        }
      },
      async handleDelete(id, single) {
        id = single ? id : table.selectedRowKeys
        if (!id.length) {
          ctx.$message({
            message: '请选择数据',
            type: 'warning'
          })
          return
        }
        try {
          await confirm()
          table.loading = true
          await vodDelete({
            ids: id
          })
          ctx.$message({
            message: '删除成功',
            type: 'success'
          })
          table.vodList()
        } catch (error) {
          if (error === 'cancel') return
          ctx.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      },
      handleSelectionChange(val) {
        table.selectedRowKeys = val.map(item => item._id)
      },
      handleSizeChange(val) {
        table.pagination.pageSize = val
        table.vodList()
      },
      handleCurrentChange(val) {
        table.pagination.currentPage = val
        table.vodList()
      }
    })

    onMounted(() => {
      table.vodList()
    })

    return {
      ...toRefs(form),
      ...toRefs(table)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-right: 50px;
}
</style>
